【最新版】Webサイトの表示スピードを高速化させる手法「26選」

Webサイトの表示スピードは主に以下の点で決まります。

他にも要因はたくさんありますが、今回紹介する内容ではこの3点を中心に改善してきます。

「リクエスト回数」とは、CSSやJavaScript、画像などの情報をサーバーからダウンロードする「回数」です。

ダウンロードの回数が多ければ多いほど、サイトの表示に時間がかかります。

なので、ダウンロードする回数を減らすことで、ページ読み込みのスピードが早くなります。

「リクエストした内容のサイズ」とは、CSSやJavaScript、画像などの情報をサーバーからダウンロードした時の「ファイルサイズ」です。

ファイルサイズが大きければ大きいほどダウンロードに時間がかかるので、その分サイトの表示も時間がかかります。

なので、ファイルサイズを小さくすることで、ページ読み込みのスピードが早くなります。

「リクエストタイミング」とは、CSSやJavaScript、画像などの情報をサーバーからダウンロードする「タイミング」です。

何も対策をしていなければ、サイト訪問時に全ての情報をダウンロードします。

しかし、このダウンロードするタイミングを以下のようにするとします。

このようにすることで、サイト訪問時には必要最低限の情報のみをダウンロードするので、ページ読み込みのスピードが早くなります。

この繰り返しでWebサイトは表示されます。

しかし、ファイルのダウンロード中でもHTMLを読み込ませる方法があり、それが「非同期読み込み」になります。

CSSの非同期読み込みは、以下のようにを読み込ませるだけです。

CSSファイルと同様、jsファイルも非同期読み込みできます。

このように「defer」「async」のどちらかの属性を付与するだけです。

「defer」「async」の違いは以下の通りです。

「async」を使うと、HTMLが最後まで読み込まれていない状態でjsが実行されるので、「要素が無いよ」「ライブラリが無いよ」などのエラーになる可能性があるので気をつけてください。

「defer」「async」の詳しい仕組みはこちらの記事で解説されています。 https://qiita.com/phanect/items/82c85ea4b8f9c373d684

はの手前で読み込ませるのが一般的でした。 しかし、非同期で読み込ませる場合はの出来るだけ上のほうで読み込ませましょう。

jsは書き方次第で無駄な処理をしてしまい、その結果サイトスピードに影響を与えます。

以下は書き方の改善例になります。

jsの書き方の改善方法はこれらの記事で解説されています。ぜひ一度目を通してみて下さい。

https://w3g.jp/blog/intermittent_event_load_reduce https://liginc.co.jp/programmer/archives/5183 https://news.mynavi.jp/article/20091111-a015/

「jQueryを使う＝jQueryのライブラリを読み込む」なので、サーバーへのリクエスト数が「1回分」増えます。とはいえ、既存のプロジェクトに既にjQueryが使われていて、それを全て生のJavaScriptに書き直すのは至難の業です。

既存のjQueryを書き直すには大幅な工数が必要なので、それなら他のスピード改善対応をするほうが良いと思います。

なので、新規でサイト制作をするときに「jQueryを使わないでコーディングできそうならそうする」程度の感覚で大丈夫です。

「自作のCSSやJSファイル」や「外部ライブラリ」の読み込みが多ければ多いほど、サーバーへのリクエスト数が増えてしまい、その結果サイトの表示速度に影響を与えます。

なので、自身で作成したCSSとJSは、それぞれ「1ファイル」にまとめましょう。

外部ライブラリに関しては、「本当に必要かどうか？」「自分でその処理を書けないか？」などを検討してみましょう。

外部ライブラリを使用している場合は「CDN」で読み込みましょう。

jQueryの本体もCDNで読み込めます。

CDNとは

Contents Delivery Networkの略で、大容量のウェブコンテンツを云々かんぬんと説明されていることが多いですが、IT系おじさんにわかりやすいように一言で伝えるなら「URLが同じまま使えるミラーサイト」です。一昔前は大きめのファイルを配布する場合など、負荷分散を目的としてミラーサイトを複数立ち上げて、重い場合はこちらをお使いください的なことをやってましたよね。

それをURL同じままで実現している仕組み。格安な海外レンタルサーバーを借りつつCDNを利用して日本にあるサーバーと変わらないくらいの速度でアクセスできるようにする、なんて利用方法もあったりします。厳密にはミラーサイトではなくキャッシュサーバーなので、キャッシュされていないコンテンツへのアクセスは遅くなるのですが、JavaScriptライブラリのような変更されないコンテンツの配信には最適なわけです。

引用元：https://blog.ver001.com/cdnjs_jsdelivr/

CSS、JSファイルの無駄な改行やコメントを削除して、ファイルサイズを圧縮させることを「minify化（ミニファイ化）」と言います。

昨今、minify化させる手段はたくさんあるので、ご自身の環境にあった方法で対応しましょう。

Webフォントは種類によってファイルサイズが大きい場合があります。

特に日本語のWebフォントは、ひらがなや漢字が含まれるのでファイルサイズが大きくなりがちです。

そこで、ファイルサイズを減らす手法として「サブセット化」という方法があります。

サブセット化＝普段使うものだけを抜き出す作業。「第一水準漢字＋ひらがな＋記号」この辺りを抜き出せば普通のwebサイトであれば十分にまかなえるでしょう。 「第一水準漢字」などで検索すれば一覧などが出てきます。

引用元：以下URL

Webフォントをサブセット化する方法はこちらの記事で紹介されています。 https://qiita.com/tomonari-t/items/aa962786469640df415d

日本語のWebフォントをサブセット化すると、数十MB単位で容量を減らせますが、実務ではなかなか許可が降りない場合もあるので、対応するときは周りの人に相談するようにしましょう。

前述の通り、日本語のWebフォントは英語のWebフォントに比べファイルサイズが圧倒的に大きいです。

なので、もし、なんとなく日本語のWebフォントを使っているのであれば、デフォルトのフォントを使うようにしましょう。

画像のファイルサイズは必ず圧縮（低く）しましょう。これだけでも、表示スピードはかなり変わります。

ファーストビューなど大きい画像以外は、基本的に300KB〜400KB以下にするようにしましょう。

画像のファイルサイズを圧縮するには、いくつか方法があります。

ファーストビューは画面幅100%で表示することが多いので画像サイズが大きくなりがちです。

これに関しては仕方がないですが、それ以外の画像は基本的に1000px以下にしましょう。（もちろん画像サイズはデザインによって適宜変えましょう）

アイコンなど単純な画像は「Data URI 形式」にすることで、サーバーへのリクエスト数を減らせます。

「Data URI」に関してはこちらのサイトで解説されています。

https://app.codegrid.net/entry/datauri-basic

また、Data URI にする画像はアイコンなど単純なものだけにしましょう。

写真など複雑な画像に対して適用すると逆効果です。

昨今、ロゴやアイコンをSVG形式で使用するサイトが増えてきました。

SVGにすることで、JPGやPNGよりファイルサイズが小さくなります。

Googleが提供するサイトスピードを計測するPageSpeed Insightsで指摘される項目のひとつです。

これらの形式を利用すると、ファイルサイズが小さくなりますが、対応するブラウザが限られます。

もし実際に利用する場合は、未対応ブラウザでも画像が表示されるような書き方をしましょう。

こちらの記事で実装例が紹介されています。

https://qiita.com/ishimasar/items/bf92e22004fcaf870d9b

サイト訪問時には、ファーストビューに関する画像だけ先に読み込み、残りはスクロールして画面内に画像が表示される時に読み込むという手法を「遅延読み込み」と言います。

対応ブラウザが限られますが、タグの属性だけで対応することができます。

参考：decoding="async"の使い方とloading="lazy"との違いのまとめ

すべてのブラウザに対応したり、タグの画像だけでなく、背景画像など他の画像や動画も遅延読み込みさせたい場合はプラグインを使う方法もあります。

参考：画像を遅延読み込みしてみよう！Intersection Observer編

昨今、YouTube動画を埋め込むサイトが増えてきました。

YouTube動画の埋め込みは、公式サイトから埋め込み用コードをコピーしてHTMLに貼り付けるだけで簡単に表示できます。

しかし、YouTube動画を埋め込むと、サイト訪問時にYouTube動画も読み込まれるので、その分表示スピードに影響を与えます。

なので、以下のような対応で表示スピードへの影響を最小限にできます。

詳しい実装方法はこちらの記事で解説されています。

https://myscreate.com/youtube-defer/

WordPressには便利なプラグインがたくさんあります。

しかし、プラグインを使いすぎるとサイトスピードに著しく影響を与える場合があります。

本当に必要なもの以外は「無効」にするか「削除」しましょう。

WordPressのプラグインを有効にすると、プラグイン独自のCSSやJSを全部のページで読み込んでいる場合があります。

しかし、お問い合わせに関するプラグインの場合、お問い合わせページ以外でそのCSSやJSを読み込ませる必要はありません。

なので、プラグインを利用するページでのみ関係ファイルを読み込ませましょう。

以下は「Contact Form 7」のCSSとJSを任意のページでのみ読み込む解説記事です。

https://neco913.kirara.st/post-2828/

投稿一覧ページで表示する件数をWordPressでは設定できます。

しかし、この設定をしないと、投稿した全ての記事が表示される場合があります。

なので、投稿を表示する件数は10〜20件程度で設定をして、それ以上の件数がある場合はページャーを利用しましょう。

公開されて何年も経つサイトの場合、未使用の計測タグや広告系のタグが埋め込まれている場合があります。

計測タグなどに限らず、使わない無駄なタグは削除しましょう。

実務の場合は、削除する前にちゃんと許可をとりましょう。

例えば、「PCとSPのURLが別々で、スマホでPCサイトにアクセスしたらSPサイトにリダイレクトされる」設定をしているとします。

その場合、スマホでPCサイトにアクセスしたら以下のような流れになります。

このように、SPサイトにアクセスするだけなのに、「PCサイトにアクセス」と「リダイレクト処理」という無駄な処理がされます。

もし、このサイトがレスポンシブでPCもSPも同じURLの場合、スマホでPCサイトにアクセスすると...

これだけでSPサイトを表示できます。

サイトの構成上、仕方のない場合もありますが（特に昔のサイト）、これから新規でサイトを制作する時はできるだけレスポンシブにしましょう。

Googleが提供するサイトスピードを計測するPageSpeed Insightsで指摘される項目のひとつです。

ファイルサイズをサーバーサイドで減らせます。

詳しい実装方法はこちらの記事で解説されています。

キャッシュを利用することで、以前アクセスした際のデータを再利用して、その分表示スピードを向上できます。

しかし、このキャッシュをもとにサイトを表示させると「CSSを変更したのにサイトに反映されない...」のようなことが起きる場合があります。

キャッシュを利用するときは、キャッシュさせるファイル、させないファイルをしっかりと決めましょう。

サーバーからデータをダウンロードするには処理が多く時間がかかります。 その処理はサーバーとダウンロード側で複数回行われることもあり、処理が遅延することで表示速度の妨げになります。 そこで、以前ダウンロードしたデータを再利用してよいか、また再利用するなら有効期限はいつまでにするのかをサーバーに指示することで、処理の工数を減らし表示速度を早めます。 このデータの再利用が、キャッシュの活用になります。

引用元：以下URL

詳しい実装方法はこちらの記事で解説されています。